/*
  插件：扩展Vue的功能
    1. 扩展Vue的全局功能
    2. 扩展Vue的局部功能（实例上的功能）

  定义插件的两种方式：
    1. 对象形式
    2. 函数形式  

  使用插件：
    Vue.use(插件)
*/

// 1. 对象形式
// const myPlugin = {
//   install(Vue) {
//     // 当插件被使用时，就会自动调用当前方法
//     // 传入Vue，我们通过给Vue添加功能

//     // 扩展全局功能
//     Vue.globalMethod = function () {
//       console.log("globalMethod");
//     };
//     // 扩展局部功能
//     Vue.prototype.$scopeMethod = function () {
//       console.log("$scopeMethod");
//     };
//     // 扩展全局过滤器
//     // 扩展全局指令
//     Vue.directive("upper-case", {
//       bind(el, binding) {
//         el.textContent = binding.value.toUpperCase();
//       },
//     });
//   },
// };

// 2. 函数形式
function myPlugin(Vue) {
  // 当插件被使用时，就会自动调用当前方法
  // 传入Vue，我们通过给Vue添加功能

  // 扩展全局功能
  Vue.globalMethod = function () {
    console.log("globalMethod");
  };
  // 扩展局部功能
  Vue.prototype.$scopeMethod = function () {
    console.log("$scopeMethod");
  };
  // 扩展全局过滤器
  // 扩展全局指令
  Vue.directive("upper-case", {
    bind(el, binding) {
      el.textContent = binding.value.toUpperCase();
    },
  });
}
